<template>
	<list>
		<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
		         :display="refreshing ? 'show' : 'hide'">
		    <text class="indicator-text">{{refreshTitle}}</text>
		</refresh>
		<cell style="padding-top: 20px;">
			<div v-for="(item,index) in getGift" class="gift_item_content" @click="toCardInfo(item.id)"
				v-if="getGift.length>0">
				<div class="gift_logo">
					<image :src="item.thumbnail" style="height:150px;width:150px"></image>
				</div>
				<div class="right_content">
					<div class="gift_info_head">
						<div style="display:flex;flex-direction: row;">
							<div class="head_logo" v-if="item.type==1"><text class="head_logo-text">礼品卡</text></div>
							<div class="head_logo" v-if="item.type==0"><text class="head_logo-text">套餐卡</text></div>
							<div>
								<text class="head_name">{{item.name}}</text>
							</div>
						</div>
						<div v-if="item.status==0"><text class="statusTitle">待领取</text></div>
						<div v-if="item.status==1"><text class="statusTitle">待使用</text></div>
						<div class="isUse" v-if="item.status==2">
							<image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/giftcard_used.png"
								style="width:112px;height:101px"></image>
						</div>
					</div>
					<div class="last_content">
						<div><text class="min_data">{{item.createDate}}</text></div>
						<div><text class="price">￥{{item.price}}</text></div>
					</div>
					<div class="last_content">
						<div><text class="price">赠送人:{{item.memberName}}</text></div>
					</div>
					<div class="button_content">
						<div class="button" @click="toUse(item.id)" v-if="item.status!=2"><text
								class="button-text">立即使用</text></div>
					</div>
				</div>
			</div>
		</cell>
		<cell style="flex: 1;">
		    <noData v-if="getGift.length==0" noDataText="您还没有相关的礼卡"></noData>
		</cell>
		<loading class="loading" @loading="onloading"
		         :display="loadinging ? 'show' : 'hide'">
		    <text class="indicator-text" style="padding-bottom: 20px;">加载中...</text>
		</loading>
	</list>
</template>
<script>
	import {
		list
	} from '../../../../api/giftCard.js'
	import {
		getInfo
	} from '../../../../api/member'
	import noData from '../../../../components/noData/noData.vue'
	export default {
		name: '',
		data() {
			return {
				pageNum: 1,
				loadinging: false,
				refreshing: false,
				getGift: [],
				myGift: [],
				myMemberId: '',
				name: '',
				currentTab: 0,
				refreshTitle:'释放刷新页面...'
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.loadMch()
		},
		methods: {
			toCardInfo(id) {

			},
			onrefresh(event) {
				this.refreshing = true
				this.refreshTitle = '加载中...'
				setTimeout(() => {
					this.pageNum = 1
					this.getGift = []
					this.refreshing = false
					this.loadGetGift()
				}, 1000)
			},
			onpullingdown(event) {
				console.log('下拉了')
				this.refreshTitle = '释放刷新页面...'
			},
			onloading(event) {
				this.loadinging = true
				setTimeout(() => {
					this.loadinging = false
					this.pageNum += 1
					this.loadGetGift()
				}, 1000)
			},
			toUse(id) {
				eeui.openPage({
					url: 'root://pages/goods/submit/index.js',
					params: id,
					statusBarType: 'immersion',
					statusBarStyle: false
				})
			},
			giveClick() {
				eeui.toast({
					message: "赠送功能正在路上哦！",
					// gravity: "middle"
				});
			},
			loadMch() {
				var _this = this
				getInfo().then(res => {
					this.myMemberId = res.data.member.id
					this.name = res.data.member.name
					setTimeout(() => {
						this.loadGetGift()
					}, 500)

				})

			},
			loadGetGift() {
				if (this.pageNum == 1 && this.currentTab == 1) {
					this.getGift = []
				}
				list({
					receiverId: this.myMemberId,
					pageNum: this.pageNum
				}).then(res => {
					res.data.data.forEach(item => {
						item.createDate = this.formatTime(item.createDate)
						this.getGift.push(item)

					})
				})
			},
		},
		components: {
			noData
		},
	}
</script>

<style scoped>
	.app {
		flex: 1;
	}

	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;
		color: blue;
	}

	.refresh {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.loading {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.coupon_choose {
		width: 750px;
		display: flex;
		flex-direction: row;
		height: 76px;
		background-color: rgb(248, 248, 248);
	}

	.coupon_choose_line {
		width: 34px;
		height: 6px;
		background-color: rgba(248, 248, 248, 1);
	}

	.coupon_choose-list {
		width: 375px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 5px;
	}

	.coupon_choose_title {
		font-size: 28px;
		font-weight: 500;
		padding-bottom: 5px;
		color: rgba(215, 38, 28, 1);
	}

	.coupon_choose_title_no {
		font-size: 28px;
		font-weight: 500;
		padding-bottom: 5px;
		color: rgba(102, 102, 102, 1);
	}

	.coupon_choose_line_no {
		width: 34px;
		height: 6px;
		background-image: linear-gradient(to bottom, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
	}

	.swiper-box {
		margin-top: 10px;
		display: block;
		flex: 1;
		width: 750px;
	}

	.gift_item_content {
		overflow: hidden;
		margin-left: 25px;
		padding: 20px;
		width: 700px;
		border-radius: 16px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
		background-color: rgba(255, 255, 255, 1);
	}

	.gift_logo {
		width: 150px;
		height: 150px;
	}

	.gift_info_head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 50px;
	}

	.right_content {
		margin-left: 18px;
		width: 490px;
	}

	.head_logo {
		width: 75px;
		height: 28px;
		background-image: linear-gradient(-90deg, rgba(196, 53, 255, 1), rgba(242, 47, 47, 1));
		border-radius: 5px;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.head_logo-text {
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		font-size: 20px;
	}

	.head_name {
		margin-left: 17px;
		margin-bottom: 5px;
		font-size: 28px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 34px;
	}

	.min_data {
		font-size: 24px;
		font-weight: 500;
		color: rgba(181, 181, 181, 1);
		line-height: 34px;
	}

	.last_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 30px;
	}

	.button-text {
		font-size: 28px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 34px;
	}

	.button {
		width: 154px;
		margin-left: 20px;
		height: 52px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 90, 0, 1);
		border-radius: 26px;
	}

	.statusTitle {
		font-size: 28px;
	}

	.price {
		font-size: 24px;
		font-weight: 800;
		color: rgba(251, 98, 98, 1);
		line-height: 30px;
	}

	.isUse {
		position: relative;
		left: 30px;
		width: 112px;
		height: 101px;
	}

	.button_content {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-end;
		margin-top: 50px;
	}

	.coupon-none {
		width: 750px;
		flex: 1;
		margin-top: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.coupon-none-image {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 196px;
		height: 131px;
	}

	.coupon-none-text {
		text-align: center;
		letter-spacing: 5px;
		font-size: 28px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 42px;
		opacity: 0.3;
		margin-top: 30px;
	}
	.indicator-text {
	    color: #888888;
	    font-size: 22px;
	    text-align: center;
		padding-top: 20px;
	}
</style>
